<template>
  <div>
    <lb-title></lb-title>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="chatForm"
        :rules="chatFormRules"
        ref="chatForm"
        label-width="110px"
      >
        <el-form-item label="小程序" prop="modular_id">
          <el-select
            v-model="chatForm.modular_id"
            filterable
            clearable
            placeholder="请选择需要清除聊天记录的小程序"
          >
            <el-option
              v-for="item in miappOptions"
              :key="item.modular_id"
              :label="item.mini_name"
              :value="item.modular_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="清除时间" prop="days">
          <el-radio-group v-model="chatForm.days">
            <el-radio
              v-for="(item, index) in daysOptions"
              :key="index"
              :label="item.id"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormInfo('chatForm')">{{
            $t('action.submit')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chatForm: {
        modular_id: '',
        days: 1
      },
      chatFormRules: {
        modular_id: { required: true, type: 'number', message: '请选择小程序', trigger: 'change' },
        days: { required: true, type: 'number', message: '请选择小程序', trigger: 'change' }
      },
      miappOptions: [],
      daysOptions: [
        {
          label: '1天前',
          id: 1
        },
        {
          label: '3天前',
          id: 3
        },
        {
          label: '7天前',
          id: 7
        },
        {
          label: '15天前',
          id: 15
        },
        {
          label: '30天前',
          id: 30
        },
        {
          label: '60天前',
          id: 60
        },
        {
          label: '全部',
          id: 0
        }
      ]
    }
  },
  created () {
    this.getminiAppList()
  },
  methods: {
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$api.delChatRecode(this.chatForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successDel'))
              this.chatForm = {
                modular_id: '',
                days: 1
              }
              this.$refs[name].resetFields()
            }
          })
        }
      })
    },
    getminiAppList () {
      this.$api.getAllMiniApp().then(res => {
        if (res.code === 200) {
          this.miappOptions = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 300px;
}
</style>
